<template>
  <div class="individuality">
    <div class="banner">
      <img
        :src="url.imageUrl!"
        alt=""
        :ref="getImgRef"
        v-for="(url, i) in banner"
        :key="url.encodeId"
        :class="{
          middle: i == num,
          left: i == (num == 0 ? banner.length - 1 : num - 1),
          right: i == (num == banner.length - 1 ? 0 : num + 1),
        }"
      />
    </div>
    <gridList :gridListInfo="gridListInfo">
      <template #title> 推荐歌单 </template>
    </gridList>
    <!-- 独家放送 最新音乐 -->
    <Personalized />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useSendReq } from "@/store/sendReq/index";
import gridList from "@/components/gridList.vue";
import Personalized from "./Personalized.vue";
const SendReq = useSendReq();
// 轮播图
// banner 显示
const num = ref(0);
const imgRef = reactive<HTMLElement[]>([]);
const banner = reactive<banners[]>([]);
const gridListInfo = reactive<homeGridList[]>([]);
// 请求得到参数
SendReq.getRecommendAndBanner().then((res) => {
  gridListInfo.push(...res[0].result);
  banner.push(...res[1].banners);
});
// 轮播图
const getImgRef = (e: any) => imgRef.push(e);
setInterval(() => {
  (function banner(length) {
    for (let i = 0; i < length - 1; i++) {
      imgRef[i].className = "";
    }
    num.value == length - 1 ? (num.value = 0) : num.value++;
  })(banner.length);
}, 2600);
</script>

<style lang="less" scoped>
.individuality {
  box-sizing: border-box;
  height: 100%;
  .banner {
    box-sizing: border-box;
    position: relative;
    height: 200px;
    transition: all 1s;
    width: 100%;
    overflow: hidden;
    line-height: 100%;
    margin-bottom: 50px;
    img {
      transition: all 1s;
      position: absolute;
      box-sizing: border-box;
      bottom: 0;
      left: 0;
      width: 700px;
      height: 180px;
      transition: all 0.3s;
      left: 50%;
      z-index: 0;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .middle {
      z-index: 30;
      height: 200px !important;
      z-index: 44 !important;
      width: 800px !important;
      transform: translate(-50%, -50%) !important;
    }

    .right {
      left: 100% !important;
      transform: translate(-100%, -50%) !important;
    }

    .left {
      left: 0 !important;
      transform: translate(0, -50%) !important;
    }
  }
}
</style>
